<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title></title>
	</head>
	<body class="df">
		<main class="flex">
			<!-- 顶部运动类型 -->
			<div id="sportsType" class="df jsbetween acenter">
				<div class="df fdc">
					<span class="f12 mb4">户外跑</span>
					<span>运动中</span>
				</div>
				<div class="f22">
					<span class="iconfont icon-yinle"></span>
					<span class="iconfont icon-shujuwajue ml12"></span>
				</div>
			</div>
			<!-- 距离 -->
			<div id="distance" class="f14"><span>99.99</span>公里</div>
			<!-- 导航GPS -->
			<div id="gps" class="df jsbetween acenter">
				<p class="f12">GPS信号度低, 数据精准度低</p>
				<div></div>
				<span class="iconfont icon-dilixinxi f28"></span>
			</div>
			<!-- 运动详情 -->
			<div id="spotsDetail">
				<ul class="df jsbetween">
					<li>
						<span class="iconfont icon-shijian"></span>配速
						<p>--</p>
					</li>
					<li>
						<span class="iconfont icon-shijian"></span>用时
						<p>00:00:20</p>
					</li>
					<li>
						<span class="iconfont icon-line-095"></span>千卡
						<p>3000</p>
					</li>
				</ul>
			</div>
			<!-- 暂停锁住 -->
			<div id="pause" class="df jcenter acenter">
				<div class="df fdc rel tcenter bgwhite jcenter f12">
					<span class="iconfont icon-iconstop"></span>
					暂停
				</div>
				<p class="lock df acenter jcenter abs">
					<span class="iconfont icon-ulock-line"></span>
				</p>
			</div>
			<!-- 蒙层 -->
			<div id="mode" class="fixed">
				<div class="abs df jcenter acenter">
					<div class="play">
						<span class="iconfont icon-bofang"></span>
					</div>
					<div class="back">
						<span class="iconfont icon-ETL-jieshu"></span>
					</div>
				</div>
			</div>
		</main>
	</body>
</html>
